<template>
  <div class="header">
    <div class="left">
      <el-icon v-if="state.hasBack" class="back" @click="back">
        <Back />
      </el-icon>
      <span style="font-size: 20px">{{ state.name }}</span>
    </div>
    <div class="right">
      <el-popover placement="bottom-start" :width="320" trigger="click" popper-class="popper-user-box">
        <template #reference>
          <div class="author">
            <i class="fa fa-user" />
            {{ (state.userInfo && state.userInfo.loginName) || '' }}
            <i class="fa fa-caret-down" />
          </div>
        </template>
        <div class="user-box">
          <el-row :gutter="20">
            <el-col :span="16">
              登录名：{{ (state.userInfo && state.userInfo.loginName) || '' }}
            </el-col>
            <el-col :span="8" class="user-action">
              <el-tag size="small" effect="dark" @click="account"><i class="fa fa-gear" /> 设置 </el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              姓名：{{ (state.userInfo && state.userInfo.userName) || '' }}
            </el-col>
            <el-col :span="8" class="user-action">
              <el-tag size="small" effect="dark" @click="logout"><i class="fa fa-sign-out" /> 退出 </el-tag>
            </el-col>
          </el-row>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { localGet, localRemove, pathMap } from '@/utils'

const router = useRouter()
const state = reactive({
  name: '',
  userInfo: null, // 用户信息变量
  hasBack: false // 是否展示返回icon
})
// 初始化执行方法
onMounted(() => {
  const pathname = window.location.hash.split('/')[1] || ''
  getPageInfo()
  if (!['login'].includes(pathname)) {
    getUserInfo()
  }
})
// 获取用户信息
const getUserInfo = async() => {
  const userInfo = localGet('user')
  state.userInfo = userInfo
}
const getPageInfo = async() => {
  state.name = pathMap[router.currentRoute.value.fullPath.slice(1)] // 删除路径最开始的“/”
  document.title = `${state.name} | 选品库`
}

const account = () => {
  router.push({ path: '/account' })
}
// 退出登录
const logout = async() => {
  const confirm = await ElMessageBox.confirm('您确认吗？', '提示', {})
  if (confirm === 'confirm') {
    localRemove('token')
    localRemove('user')
    // 回到登录页
    router.push({ path: '/login' })
  }
}

router.afterEach(to => {
  const { id } = to.query
  getPageInfo()
})

// 返回方法
const back = () => {
  router.back()
}
</script>

<style scoped>
.header {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 20px;
}
.header .left .back {
  border: 1px solid #e9e9e9;
  padding: 5px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
}
.right > div > .icon {
  font-size: 18px;
  margin-right: 6px;
}
.author {
  margin-left: 10px;
  cursor: pointer;
}
</style>

<style>
.popper-user-box {
  background: url('../assets/user-box.png') 50% 50% no-repeat !important;
  background-size: cover !important;
  border-radius: 0 !important;
}
.popper-user-box .user-box {
  color: #ffffff;
}
.popper-user-box .user-box .el-row {
  margin: 5px 0 10px 0;
}
.popper-user-box .user-box .user-action {
  text-align: right;
}
.popper-user-box .user-box .user-action .el-tag{
  cursor: pointer;
}
</style>
